import { Box, Typography } from '@mui/material';
import Button from '@mui/material/Button';
import { connectWalletDialog } from 'components/shared/dialogs';
import Web3Manager from 'libs/web3-manager';
import { useRouter } from 'next/router';

import { BRANDING } from '../../constants/branding';
import Routes from '../../constants/routes';

const ConnectWalletPage = () => {
    const router = useRouter();
    const onClick = async () => {
        connectWalletDialog({ open: true });
        if (await Web3Manager.connect()) {
            connectWalletDialog({ open: false });
            router.push(Routes.HOME);
        } else {
            connectWalletDialog({ open: false });
        }
    };
    return (
        <>
            <style jsx global>{`
                .container-galaxy {
                    height: calc(100vh);
                    background-image: url(/new-bg-manager.svg);
                    background-size: cover;
                }

                .content {
                    position: relative;
                    padding: 50px 96px;
                    width: 100%;
                    height: 100%;
                }
            `}</style>

            <Box className={'container-galaxy'}>
                <Box className={'content'}>
                    <Typography
                        sx={{
                            paddingBottom: '150px',
                            fontWeight: '600',
                            fontSize: '40px',
                            lineHeight: '60px',
                            color: '#FFFFFF'
                        }}
                    >
                        {BRANDING.NAME}
                    </Typography>
                    <Typography
                        sx={{
                            fontWeight: '600',
                            fontSize: '72px',
                            lineHeight: '133.5%',
                            width: '700px',
                            color: '#FFFFFF',
                            paddingBottom: '16px',
                            ['@media (max-width:992px)']: {
                                width: 'auto'
                            }
                        }}
                    >
                        Manage your guild easily.
                    </Typography>
                    <Typography
                        sx={{
                            fontWeight: '300',
                            fontSize: '24px',
                            lineHeight: '165%',
                            color: '#FFFFFF',
                            paddingBottom: '32px'
                        }}
                    >
                        The next generation of gaming is here.
                    </Typography>
                    <Button
                        sx={{
                            fontStyle: 'normal',
                            fontWeight: '500',
                            fontSize: '24px',
                            lineHeight: '25px',
                            width: '260px',
                            height: '60px',
                            background: 'rgba(144, 22, 254, 0.5)',
                            borderRadius: '4px',
                            color: '#ffffff',
                            border: 'none',
                            textTransform: 'none',
                            padding: '20px',
                            '&:hover': {
                                background: 'rgba(144, 22, 254, 0.5)'
                            }
                        }}
                        variant="contained"
                        onClick={onClick}
                    >
                        Connect Wallet
                    </Button>
                </Box>
            </Box>
        </>
    );
};

export default ConnectWalletPage;
